<template>
  <ul>
    <li>props id: {{id}}</li>
    <li>props name: {{name}}</li>
    <li>props title: {{title}}</li>
    <br>
    <br>
    <li>query ID2: {{$route.query.id2}}---title: {{$route.query.title}}</li>
    <li>ID: {{$route.params.id}}</li>
    <li>TITLE: {{detail.title}}</li>
    <li>CONTENT: {{detail.content}}</li>
  </ul>
</template>

<script>
const allMessageDetails = [
        {id: 1, title: 'Message00001', content: 'Message Content001'},
        {id: 3, title: 'Message00003', content: 'Message Content003'},
        {id: 5, title: 'Message00005', content: 'Message Content005'},
      ]
export default {
  name: 'MessageDetail',

  props: ['id', 'name', 'title'],

  data () {
    return {
      detail: {}
    }
  },

  /* 
  路由组件默认是在离开时才会死亡, 返回时重新创建
  请求当前路由路径, 只是参数有变化 
     ==> 组件对象不会销毁重新创建
     ==> 但重新指定了data中的$route
  如何知道参数变化了?  监视$route的变化
  */
  mounted () {
    console.log('mounted')
    // 根据id请求获取详情对象
    this.updateUI(this.$route)
  },

  watch: {
    $route: function (value) {
      this.updateUI(value)
    }
    // $route: this.updateUI

    /* 
    function fn (event) {}
    div.onclick = function (event) {
      fn(event)
    }
    div.onclick = fn
    */
  },

  methods: {
    updateUI (route) {
      const id = route.params.id*1 // 一定要转为number
      setTimeout(() => {
        const detail = allMessageDetails.find(item => item.id===id)
        this.detail = detail
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
